<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="80%"
      top="5vh"
      @close=""
    >
      <el-container>
        <el-header height="">
          <el-row :gutter="20">
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              ID：{{ id }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              用户名：{{ user.username }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              昵称：{{ user.nickname }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              手机号：{{ user.phone }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              锁定：{{ user.status?'否':'是' }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              会员：{{ user.user_level }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              会员到期时间：{{ user.user_expire }}
            </el-col>
            <el-col
              style="padding:10px 0;"
              :span="6"
              :offset="0"
            >
              注册时间：{{ user.created_time }}
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="(item,index) in tabs"
              :key="index"
              :label="item.label"
              :name="item.name"
            >
              <el-table
                v-loading="listLoading"
                :data="list"
                height="280"
                border
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  width="55"
                />
                <el-table-column
                  v-for="(t,tI) in item.ths"
                  :key="tI"
                  :prop="t.prop"
                  :label="t.label"
                />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
        <el-footer>
          <pagination
            style="padding: 0;margin:0;padding-top: 10px;"
            :total="form.total"
            :page.async="form.page"
            :limit.async="form.limit"
            layout="total,prev,pager,next"
            @pagination="getList"
          />
        </el-footer>
      </el-container>
      <span slot="footer">
        <el-button @click="hide">Cancel</el-button>
        <el-button
          type="primary"
          @click="hide"
        >OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    userDetail,
    userCourse,
    userColumn,
    userOrder,
    userHistory,
    userComment
  } from '@/api/user'
  const statusOptions = {
    pendding: '支付中',
    success: '支付完成',
    fail: '支付失败'
  }
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        dialogVisible: false,
        activeName: 'course',
        listLoading: false,
        id: 0,
        tabs: [{
                label: '课程订阅',
                name: 'course',
                ths: [{
                    prop: 'title',
                    label: '课程标题'
                }, {
                    prop: 'price',
                    label: '购买价格'
                }, {
                    prop: 'created_time',
                    label: '购买时间'
                }],
                request: userCourse
            }, {
                label: '专栏订阅',
                name: 'column',
                ths: [{
                    prop: 'title',
                    label: '专栏标题'
                }, {
                    prop: 'price',
                    label: '购买价格'
                }, {
                    prop: 'created_time',
                    label: '购买时间'
                }],
                request: userColumn

            }, {
                label: '订单记录',
                name: 'order',
                ths: [{
                    prop: 'id',
                    label: 'ID'
                }, {
                    prop: 'no',
                    label: '订单号'
                }, {
                    prop: 'price',
                    label: '购买价格'
                }, {
                    prop: 'status',
                    label: '状态'
                }, {
                    prop: 'title',
                    label: '商品'
                }, {
                    prop: 'created_time',
                    label: '购买时间'
                }],
                request: userOrder
            }, {
                label: '观看历史',
                name: 'history',
                ths: [{
                    prop: 'title',
                    label: '课程标题'
                }, {
                    prop: 'type',
                    label: '课程类型'
                }, {
                    prop: 'total_time',
                    label: '学习时长'
                }],
                request: userHistory
            }, {
                label: '用户评论',
                name: 'comment',
                ths: [{
                    prop: 'content',
                    label: '评论内容'
                }, {
                    prop: 'created_time',
                    label: '评论时间'
                }, {
                    prop: 'title',
                    label: '课程标题'
                }, {
                    prop: 'type',
                    label: '类型'
                }],
                request: userComment
            }],
        user: {
          id: 0,
          avatar: '',
          username: '',
          nickname: '',
          phone: '',
          user_level: '',
          user_expire: '',
          created_time: '',
          status: 0
        },
        form: {
          limit: 20,
          total: 100,
          page: 1
        },
        list: []
      }
    },
    computed: {
      currentTab() {
        return this.tabs.filter(item => item.name === this.activeName)[0].request
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        this.currentTab(this.form).then(res => {
          if (this.activeName === 'order') {
            this.list = res.data.items.map(item => {
              item.status = statusOptions[item.status]
              return item
            })
          } else {
            this.list = res.data.items
          }
          this.form.total = res.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        })
       },
      show(id) {
        userDetail({ id }).then(res => {
          this.id = id
          this.user = res.data.user
        })
        this.getList()
        this.dialogVisible = true
      },
      hide() {
        this.dialogVisible = false
      },

      handleClick(tab, event) {
        this.getList()
      }
    }
  }
</script>
